<!--
 * @Date: 2024-09-13 10:17:19
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-19 09:18:27
 * @Description: 图标组件
-->
<template>
  <!-- el图标 -->
  <i v-if="isEleIcon" class="rk-icon el-icon" :style="iconStyle">
    <component :is="elIconComp" />
  </i>
  <!-- iconfont图标 -->
  <i v-else class="rk-icon" :class="iconClass" :style="iconStyle"></i>
</template>

<script setup>
import { computed } from 'vue';
import * as elIcons from '@element-plus/icons-vue';

const props = defineProps({
  // 图标名称
  name: { type: String },
  // 图标大小，默认为14px
  size: { type: [String, Number], default: () => 14 },
  // 图标颜色
  color: { type: String },
})

// i标签的样式类
const iconClass = computed(() => {
  const { name } = props
  let finalClass = name
  if (name) {
    if (name.startsWith('iv-icon-')) {
      finalClass = `iv-iconfont ${name}`
    } else if ((name.startsWith('icon-'))) {
      finalClass = `iv-iconfont ${name}`
    } else {
      if (!name.includes('iconfont')) {
        finalClass = `iv-iconfont iv-icon-${name}`
      } else {
        finalClass = `iv-iconfont ${name}`
      }
    }
  }
  return finalClass || ''
})
// 图标的style样式
const iconStyle = computed(() => {
  return `font-size: ${props.size}px;color: ${props.color};`;
})
// 是否为el图标
const elPix = 'el-'
const isEleIcon = computed(() => {
  return props?.name?.startsWith(elPix);
})
const elIconComp = computed(() => {
  let item = ''
  if (isEleIcon.value) {
    let name = props?.name.replace(elPix, '').replaceAll('-', '')
    for (let iconKey in elIcons) {
      if (name.toLowerCase() === iconKey.toLowerCase()) {
        item = elIcons[iconKey]
        break;
      }
    }
    return item
  } else {
    return ''
  }
})

</script>

<style lang="scss" scoped>
.rk-icon {
  margin-left: 0.35em;
  margin-right: 0.35em;
}
</style>
<style lang="scss">
@import '@/styles/mixins/index.scss';
.el-sub-menu,
.el-menu-item {
  .iconfont, .rk-iconfont {
    @include generalIcon;
  }
}
</style>

